<template>
    <div>
        <el-dialog
            fullscreen
            destroy-on-close
            @close="closePrivece"
            :visible="dialogVisible">
            <div class="w">
                <div class="privece-title">{{currentPriveceData.names}}</div>
                <div class="privece-info">
                    <span>{{currentPriveceData.looks}}</span>播放
                    <span>{{currentPriveceData.danmus.length}}</span>弹幕
                </div>
                <div class="publish-user">
                    <img :src="currentPriveceData.users.avatar == 'no' ? 'http://47.105.157.158:3000/images/upload/default.jpg' : `http://47.105.157.158:3000/images/upload/${currentPriveceData.users.avatar}`">
                    <span>{{currentPriveceData.users.userName}}</span>
                </div>
                <div class="privece-video">
                    <div class="gundong-danmu" v-if="isShowDanMu">
                        <div 
                        :key="index"
                        v-for="(item, index) in currentPriveceData.danmus"
                        class="gundong-item">{{item}}</div>

                    </div>
                    <div class="mask"></div>
                    <div
                    :class="isShowPlay ? 'play-video' : 'd-hidden'"
                    @click="playVideo" 
                    class="play-video iconfont">{{isShowPlay ? '&#xe682;' : '&#xe668;'}}   </div>
                    <video ref="video" :poster="`http://47.105.157.158:3000/images/video/${currentPriveceData.imgs}`" :src="`http://47.105.157.158:3000/video/${currentPriveceData.cat}/${currentPriveceData.paths}`"></video>
                    <div class="danmu-list">
                        <div class="danmu-title">弹幕列表</div>
                        <div :key="index" v-for="(item, index) in currentPriveceData.danmus" class="danmu-item">{{item}}</div>
                    </div>
                </div>
                <div class="dianzan">
                    <i @click="submitDianZan(currentPriveceData._id)" class="iconfont">&#xe8c3;</i>
                    <span>{{currentPriveceData.dianzan}}</span>
                </div>
                <div class="privece-danmu-submit">
                    <input v-model="currentDanMuText" placeholder="发个友善的弹幕见证当下" type="text">
                    <div @click="submitDanMu(currentPriveceData._id)">发送</div>
                </div>

                <div class="comment-wrap">
                    <div class="comment-title"><span>{{currentPriveceData.comments.length}}</span>评论</div>
                    <div class="comment-submit">
                        <div class="comment-avatar">
                            <img 
                            :src="currentUser == null ? 'http://47.105.157.158:3000/images/upload/default.jpg' : currentUser.avatar == 'no' ? 'http://47.105.157.158:3000/images/upload/default.jpg' : `http://47.105.157.158:3000/images/upload/${currentUser.avatar}`" ></div>
                        <input v-model="currentCommentText" placeholder="发一个评论吧" type="text">
                        <div @click="submitComment(currentPriveceData._id)" class="comment-btn">发表评论</div>
                   </div>
                </div>

                <div class="comment-list-wrap" v-if="currentPriveceData.comments.length > 0">
                    <div class="list-item" :key="index" v-for="(item, index) in currentPriveceData.comments">
                        <div class="user-avatar">
                            <img :src="item.user.avatar == 'no' ? 'http://47.105.157.158:3000/images/upload/default.jpg' : `http://47.105.157.158:3000/images/upload/${item.user.avatar}`">
                        </div>
                        <div class="user-text">
                            <span>{{item.user.userName}}</span>
                            <div>{{item.text}}</div>
                        </div>
                    </div>
                </div>

            </div>

            <!-- 相关推荐 -->
        




            <!-- 插槽 -->
            <span slot="footer" class="dialog-footer">
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { ref, onMounted } from '@vue/composition-api';
import axios from 'axios';
export default {
    props: {
        currentPriveceData: {
            type: Object
        }
    },
    setup(props, context) {
        axios.defaults.baseURL = 'http://47.105.157.158:3000';
        const dialogVisible = ref(true);

        onMounted(() => {
            getCurrentUser();
        })

        // 关闭预览
        const closePrivece = function () {
            context.emit('closePrivece', false);
        }

        // 控制播放按钮的样式
        const isShowPlay = ref(true);
        // 播放视频
        const playVideo = function () {          
            isShowPlay.value = !isShowPlay.value;
            if (isShowPlay.value) {
                context.refs.video.pause();
            } else {
                context.refs.video.play();
                if (danmuFlag.value) {
                    isShowDanMu.value = true;
                    danmuFlag.value =false;
                }
            }
        }

        // 点赞
        const submitDianZan = function(id) {
            context.emit('submitDianZan', id);
        }

        // 当前观看用户的信息
        const currentUser = ref(null);
        // 获取当前观看的用户
        const getCurrentUser = async function () {
            // 没有登录就不获取
            if (window.localStorage.getItem('token')) {
                let { data: res } = await axios.get(`/user/login/${window.localStorage.getItem('token')}`);
                if (res.status != 200)
                    return context.parent.$message.error('获取用户信息失败，请尝试重新登录');
                currentUser.value = res.user;
            }
        }

        // 评论的内容
        const currentCommentText = ref('');
        // 发表评论
        const submitComment = async function (videoID) {
            if (currentUser.value == null)
                return context.parent.$message.error('您还没有登录，请登录后再发表评论');
            if (currentCommentText.value.trim().length == 0)
                return context.parent.$message.error('评论内容不能为空哦');


            let formParams = {
                text: currentCommentText.value,
                videoID,
                user: currentUser.value
            }


            let { data: res } = await axios.post('/video/comment', formParams);
            if (res.status != 200)
                return context.parent.$message.error('评论失败，你可能没有登录，或者服务器遇到异常');
            context.emit('newVideoComment', res.newVideo);
            currentCommentText.value = '';
        }


        // 弹幕内容
        const currentDanMuText = ref('');
        // 发表弹幕
        const submitDanMu = async function (videoId) {
            if (currentDanMuText.value == '')
                return context.parent.$message.error('弹幕内容不允许为空');
            let { data: res } = await axios.post(`/video/danmu/${videoId}/${currentDanMuText.value}`);
            if (res.status != 200)
                return context.parent.$message.error('发送弹幕失败，遇到未知错误，请重新尝试');
            context.emit('newVideoDanMuData', res.newVideo);
            currentDanMuText.value = '';
        }

        // 控制弹幕的显示与隐藏
        const isShowDanMu = ref(false);
        // 弹幕节流阀
        const danmuFlag = ref(true);

        const methods = 
        { 
            closePrivece,playVideo,
            submitDianZan,
            submitComment,
            submitDanMu
        }

        return {
            ...methods,
            dialogVisible,
            isShowPlay,
            currentUser,
            currentCommentText,
            currentDanMuText,
            isShowDanMu,
        }
    }
}
</script>



<style lang="less" scoped>

.privece-title {
    font-size: 20px;
    color: #000;
    margin-bottom: 10px;
}

.privece-info {
    span {
        margin-right: 6px;
    }
}

.d-hidden {
    display: none!important;
}

.privece-video {
    position: relative;
    display: flex;
    height: 600px;
    margin: 12px 0 20px 0;
    .mask {
        display: none;
        width: 940px;
        pointer-events: none;
        cursor: pointer;
    }
    video {
        height: 100%;
        margin: 0;
        object-fit: fill;
        width: 940px;
        outline: none;
        cursor: pointer;
    }
     &:hover .play-video {
        display: block!important;
        
    }
    &:hover .mask {
        display: block!important;
        
    }
    .play-video {
        display: block;
        position: absolute;
        left: 40%;
        top: 50%;
        font-size: 80px;
        cursor: pointer;
        z-index: 999;
        color: #fff;
        font-weight: 700;
        transform: translate(-50%, -50%);
    }
    .danmu-list{
        width: 240px;
        padding: 0 10px;
        height: 100%;
        overflow: hidden;
        .danmu-title {
            height: 50px;
            margin-bottom: 20px;
            line-height: 50px;
            background-color: #f4f4f4;
            padding: 0 10px;
            font-size: 20px;
            color: #000;
        }
        .danmu-item {
            padding: 0 10px;
            margin: 10px 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
}

.privece-danmu-submit {
    display: flex;
    input {
        flex: 1;
        padding: 0 10px;
        outline: none;
        border-radius: 6px;
        border: 1px solid #ccc;
    }
    div {
        width: 100px;
        height: 40px;
        color: #fff;
        font-weight: 700;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
        border-radius: 6px;
        background: #19a5d3;
    }
}

.dianzan {
    margin-bottom: 20px;
    i {
        font-size: 30px!important;
        margin-right: 6px;
        cursor: pointer;
    }
    span {
        font-size: 20px;
    }
}

.comment-wrap {
    margin-top: 30px;
    .comment-title {
        font-size: 24px;
        letter-spacing: 1px;
        span {
            margin-right: 10px;
        }
    }
    .comment-submit {
        display: flex;
        margin-top: 20px;
        height: 60px;
        border-bottom: 1px solid #ccc;
        padding-bottom: 50px;
        .comment-avatar {
            position: relative;
            width: 100px;
            height: 100%;
            text-align: center;
            img {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                width: 50px;
                height: 50px;           
                border-radius: 50%;
            }
        }
        input {
            flex: 1;
            padding: 0 10px;
        }
        .comment-btn {
            width: 100px;
            height: 100%;
            background-color: #19a5d3;
            line-height: 60px;
            text-align: center;
            color: #fff;
            font-weight: 700;
            font-size: 16px;
            cursor: pointer;
        }
    }
}

.comment-list-wrap {
    margin-top: 20px;
    .list-item {
        display: flex;
        margin-bottom: 30px;
    }
    .user-avatar {
        position: relative;
        width: 100px;
        height: 60px;  
        img {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }
    }

    .user-text {
        flex: 1;
        padding-top: 2px;
        border-bottom: 1px solid #ccc;
        div {
            padding: 10px 0;
            color: #000;
        }
        span {
            color: #6d757a;
            font-weight: 700;
        }
    }
}

.publish-user {
    position: absolute;
    top: 0;
    right: 10px;
    img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        vertical-align: middle;
        margin-right: 12px;
    }
    span {
        font-weight: 700;
        font-size: 16px;
    }
}

.gundong-danmu {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    width: 940px;
    height: 100%;
    div {
        display: none;
    }
    .gundong-item {
        display: block;
        position: absolute;
        right: 0;
        font-size: 22px;
        color: #fff;
        font-weight: 700;
        opacity: 0;
        animation: danmu4  linear;
    }
    .gundong-item:nth-child(odd) {
        animation: danmu1 18s linear;
    }
    .gundong-item:nth-child(even) {
        animation: danmu2 18s 1s linear;
    }
    .gundong-item:nth-child(1) {
        animation: danmu1 18s linear;
    }
    .gundong-item:nth-child(2) {
        animation: danmu2 16s linear;
    }
    .gundong-item:nth-child(3) {
        animation: danmu3 19s linear;
    }
    .gundong-item:nth-child(4) {
        animation: danmu4 18s linear;
    }
    .gundong-item:nth-child(5) {
        animation: danmu1 18s 5s linear;
    }
    .gundong-item:nth-child(6) {
        animation: danmu2 16s 6s linear;
    }
    .gundong-item:nth-child(7) {
        animation: danmu3 19s 7s linear;
    }
    .gundong-item:nth-child(8) {
        animation: danmu4 18s 8s linear;
    }
    .gundong-item:nth-child(9) {
        animation: danmu1 18s 9s linear;
    }
    .gundong-item:nth-child(10) {
        animation: danmu2 16s 10s linear;
    }
    .gundong-item:nth-child(11) {
        animation: danmu3 19s 11s linear;
    }
    .gundong-item:nth-child(12) {
        animation: danmu4 18s 12s linear;
    }
    .gundong-item:nth-child(13) {
        animation: danmu1 18s 13s linear;
    }
    .gundong-item:nth-child(14) {
        animation: danmu2 16s 14s linear;
    }
    .gundong-item:nth-child(15) {
        animation: danmu3 19s 15s linear;
    }

    .gundong-item:nth-child(+15n) {
        animation: danmu3 19s linear;
    }

    @keyframes danmu1 {
        0% {
            opacity: 1;
            transform: translate(0, 100px);
        }
        100% {
            transform: translate(-940px, 100px);
            opacity: 1;
        }
    }
    @keyframes danmu2 {
        0% {
            opacity: 1;
            transform: translate(0, 180px);
        }
        100% {
            transform: translate(-940px, 180px);
            opacity: 1;
        }
    }
    @keyframes danmu3 {
        0% {
            opacity: 1;
            transform: translate(0, 260px);
        }
        100% {
            transform: translate(-940px, 260px);
            opacity: 1;
        }
    }
    @keyframes danmu4 {
        0% {
            opacity: 1;
            transform: translate(0, 350px);
        }
        100% {
            transform: translate(-940px, 350px);
            opacity: 1;
        }
    }
}


</style>